<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../css/aui.css">
</head>
<style>
    html{
        font-size: 90%;
    }
    ::-webkit-input-placeholder { /* WebKit browsers */
    color: #999;
    }

    ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #999;
    }

    :-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #999;
    } 
    .back{
        width: 2rem;
        height: 2rem;
        float: left;
    }
    .main{
        height: 33rem;
        width: 100%;
        overflow-x: auto;
        background-color: #f5f5f5;
    }

    .sc_box{
        float: left;
        width: 100%;
        height: auto;
    }
    .comment_content{
        width: 100%;
        height: auto;
        padding: 0.5rem;
        background-color: white;
        float: left;
    }
    .comment_user_info{
        width: 100%;
        height: 4rem;
        background-color: #fff;
    }
    .com_head_img{
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 2rem;
        background-color: red;
        float: left;
        margin-top: 0.25rem;
    }
    .user_info{
        width: 40%;
        height: 80%;
        position: relative;
        top: 10%;
        float: left;
        left: 1rem;
    }
    .user_name{
        font-size: 1.2rem;
        font-weight: bold;
        height: 50%;
        width: 100%;
    }
    .send_time{
        font-size: 1.1rem;
        height: 50%;
        width: 100%;
    }
    .com_do_box{
        margin-top: -1rem;
        width: 50%;
        margin-right: 4%;
        height:4.5rem;
        float:right;
    }
    .com_ds_btn{
        width: 2.2rem;
        float: right;
        padding-top: 0.2rem;
    }
    .com_ds_btn img{
        width: 1.2rem;
        float: right;
    }
    .com_zan_btn{
        width: 7rem;
        float: right;
        margin-top: 0.1rem;
    }
    .com_zan_btn img{
        width: 1.2rem;
        float: right;
    }
    .com_rep_btn{
        width: 2rem;
        float: right;
        color: black;
    }
    .com_rep_btn img{
        width: 1.6rem;
        float: right;
    }
    .comment_text{
        width: 80%;
        margin-left: 16%;
        font-size: 1.1rem;
        display: block;
        float: left;
        color: #666666;
        letter-spacing:0.1rem;
    }
    .reply_box{
        width: 100%;
        height: auto;
        padding: 0.5rem 1rem 0.5rem 1rem;
        float: left;
    }
    .reply_count{
        display: block;
        height: 2rem;
        font-size: 1.1rem;
        color: #333333;
        line-height: 2rem;

    }
    .reply_item{
        width: 100%;
        height: auto;
        border-bottom: 0.1rem solid rgb(223, 223, 223);
        float: left;
        padding-top: 1rem;
    }
    .rep_head_img{
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 2rem;
        background-color: red;
        float: left;
    }
    .rep_user_info{
        height: 100%;
        width: 50%;
        float: left;
        margin-left: 0.5rem;
    }
    .rep_user_name{
        letter-spacing:0.1rem;
        color: #31a2ff;
        font-size: 1rem;
        
    }
    .rep_send_time{
        color: #999999;
        font-size: 0.9rem;
        
    }
    .rep_zan{
        margin-top: 0.7rem;
        float: right;
        width: 1.2rem;
    }
    .rep_zan img{
        float: left;
        margin-left: -1.8rem;

    }
    .rep_text{
        font-size: 1rem;
        color: #c0c0c0;
        float: left;
        margin-left: 3rem;
        width: 70%;
        padding-top: 0.8rem;
        padding-bottom: 1rem;
        letter-spacing:0.1rem;
    }
    .reply_btn{
        width: 2.5rem;
        height: 2rem;
        float: right;
        font-size: 0.9rem;
        padding-top: 1rem;
    }
    .comment_box{
        height: 3.8rem;
        width: 100%;
        position: absolute;
        bottom: 0;
        background-color: white;
    }
    .comment_box input{
        font-size: 1.3rem;
        width: 24rem;
        height: 2.5rem;
        border-radius: 0.5rem;
        border: 0.1rem solid rgb(223, 223, 223);
        margin-top: 0.7rem;
        margin-left: 1rem;
        color: #999999;
        text-indent:0.8rem;
        float: left;
    }
    .comment_box span{
        font-size: 1.1rem;
        display: block;
        height: 100%;
        width: 3rem;
        text-align: center;
        line-height: 3.8rem;
        float: right;
        margin-right: 1rem;
    }
</style>
<body>
    <header id="header" class="aui-bar aui-bar-nav" style="background-color:#ff9f00;height: 4rem;margin-top: -0.1rem;" > 
        <div class="back" onclick="api.closeWin()"><i class="aui-iconfont aui-icon-left" style="font-size: 1.6rem;line-height: 4rem;"></i></div>
        <div  style="line-height:4rem;font-size: 1.4rem;font-weight: 200;"><span style="font-size: 1.5rem;font-weight: 400;">15</span>条回复</div>
    </header>
    <div class="main">
        <div class="sc_box">
            <div class="comment_content">
                <div class="comment_user_info">
                    <div class="com_head_img">
                        <img />
                    </div>
                    <div class="user_info">
                        <div class="user_name">阿斯达四大所</div>
                        <div class="send_time">上午9:30</div>
                    </div>
                    <div class="com_do_box">
                        <div class="com_ds_btn">
                            <img src="../../image/reward.png" />
                        </div>
                        <div class="com_rep_btn">
                            <span class="aui-iconfont aui-icon-comment" style="font-size: 1.2rem;"></span>
                        </div>
                        <div class="com_zan_btn">
                            
                            <span style="display: block;
                            float: right;
                            height: 100%;
                            margin-right: 1.2rem;
                         
                            font-size: 1rem;
                            color: #333333;">0</span>
                            <img src="../../image/zan.png" />
                        </div>
                    </div>
                    <p class="comment_text">
                        阿萨德康师傅尽快结束的福克斯的能否接纳侃大山阿斯顿撒多所
                    </p>
                </div>
            </div>
            <div class="reply_box">
                <span class="reply_count">共15条回复</span>
                <div class="reply_item">
                    <div class="rep_head_img"></div>
                    <div class="rep_user_info">
                        
                        <div class="rep_user_name">阿斯达四大</div>
                        <div class="rep_send_time">上午9:30</div>
                    </div>
                    <div class="rep_zan">
                       <span></span>
                       <span></span>
                    </div>
                    <p class="rep_text">阿斯达阿萨德发的鬼地方发送到对方说的四大故事的故事发生较大开大上看见</p>
                    <div class="reply_btn">回复</div>
                </div>
                <div class="reply_item">
                    <div class="rep_head_img"></div>
                    <div class="rep_user_info">
                        <div class="rep_user_name">阿斯达四大</div>
                        <div class="rep_send_time">上午9:30</div>
                    </div>
                    <div class="rep_zan">
                        <img src="../../image/zan.png" />
                        <span style="display: block;
                            float: left;
                            height: 100%;
                          
                            padding-top: 0.1rem;
                            font-size: 0.9rem;
                            color: #999999;">123k</span>
                    </div>
                    <p class="rep_text">阿斯达阿萨德发的鬼地方发送到对方说的四大故事的故事发生较大开大上看见</p>
                    <div class="reply_btn">回复</div>
                </div>
                <div class="reply_item">
                    <div class="rep_head_img"></div>
                    <div class="rep_user_info">
                        <div class="rep_user_name">阿斯达四大</div>
                        <div class="rep_send_time">上午9:30</div>
                    </div>
                    <div class="rep_zan">
                        <img src="../../image/zan.png" />
                        <span style="display: block;
                            float: left;
                            height: 100%;
                          
                            padding-top: 0.1rem;
                            font-size: 0.9rem;
                            color: #999999;">123k</span>
                    </div>
                    <p class="rep_text">阿斯达阿萨德发的鬼地方发送到对方说的四大故事的故事发生较大开大上看见</p>
                    <div class="reply_btn">回复</div>
                </div>
                <div class="reply_item">
                    <div class="rep_head_img"></div>
                    <div class="rep_user_info">
                        <div class="rep_user_name">阿斯达四大</div>
                        <div class="rep_send_time">上午9:30</div>
                    </div>
                    <div class="rep_zan">
                        <img src="../../image/zan.png" />
                        <span style="display: block;
                            float: left;
                            height: 100%;
                            padding-left: 0.3rem;
                            padding-top: 0.1rem;
                            font-size: 0.9rem;
                            color: #999999;">123k</span>
                    </div>
                    <p class="rep_text">阿斯达阿萨德发的鬼地方发送到对方说的四大故事的故事发生较大开大上看见</p>
                    <div class="reply_btn">回复</div>
                </div>
            </div>
        </div>
    </div> 
    <div class="comment_box">
        <input type="text" name="comment" placeholder="说点什么" />
        <span>评论</span>
    </div>   
</body>
</html>
